<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">学生管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="学生姓名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
				  <table class="table table-hover">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll">全选</th>
						    <th>序号</th>
							<th>学生姓名</th>
							<th>班级</th>
							<th>政治面貌</th>
							<th>民族</th>
							<th>性别</th>
							<th>生日</th>
							<th>联系方法</th>
							<th>地址</th>
						</tr>
					</thead>
					<tbody id="tbodyId" >
					</tbody>
				  </table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix">
            </div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
   $(function(){   
	  $("#pageId").load("doPageUI",function(){
		  doGetObjects();
	  });
	  $(".input-group-btn")
	  .on("click",".btn-search",doQueryObjects)
	  .on("click",".btn-add",doLoadEditUI)
          .on("click",".btn-delete",doDeleteObjects)
	  $("#tbodyId")

	  .on("click",".btn-update",doLoadEditUI)
	   //全选按钮事件注册
	   $("#checkAll").change(doChangeTbodyCheckBoxState);
	   //tbody中checkbox对象事件注册
	   $("#tbodyId").on("change","input:checkbox",doChangeTheadCheckBoxState);
   });
   //修改thead中checkbox对象状态
   function doChangeTheadCheckBoxState(){
	   //1.获取所有tbody中checkbox对象的状态,并进行逻辑与操作
	   var flag=true;//初始值不能等于false
	   $("#tbodyId input:checkbox")
			   .each(function(){
				   flag=flag&&$(this).prop("checked");
			   })
	   //2.修改thead中checkbox对象状态
	   $("#checkAll").prop("checked",flag);
   }

   //修改tbody中checkbox对象状态
   function doChangeTbodyCheckBoxState(){
	   //1.获取thead中checkbox对象状态
	   //这里的$(this)指向的对象为thead中的checkbox对象
	   var flag=$(this).prop("checked");
	   //2.修改tbody中checkbox对象状态
	   $("#tbodyId input:checkbox").prop("checked",flag);
   }

   //获取选中checkbox对象中value属性的值并存储到数组
   function doGetCheckedIds(){
	   //1.定义数组,用于存储选中的记录id
	   var array=[];//new Array();
	   //2.获取所有checkbox对象,并进行迭代,获取value属性值,然后存储到数组.
	   $("#tbodyId input:checkbox")//获取tbodyId对应的元素中类型为checkbox的input对象
			   .each(function(){//迭代所有类型为checkbox的input对象
				   if($(this).prop("checked")){//获取checkbox对象的checked属性并校验
					   array.push($(this).val());//将选中的记录的value属性值存储到数组
				   }
			   });
	   //3.返回存储了记录id值的数组对象
	   return array;
   }
   function doLoadEditUI(){
	   var title;
	   if($(this).hasClass('btn-add')){
		   title="添加角色";
		   doLoadPageUI(title);
	   }else{
		   title="修改角色"
		   var id=$(this).parents("tr").data("id");
		   var params={"id":id};
		   var url="student/doFindObjectById";
		   $.getJSON(url,params,function(result){
			   if(result.state==1){
				  result.data.id=id;//在结果中动态追加id
				  $("#mainContentId").data("data",result.data);
				  doLoadPageUI(title);//异步加载页面  
			   }else{
				  alert(result.message); 
			   }
		   });
	   }
   }
   function doLoadPageUI(title){
	   var url="student/student_edit"
	   $("#mainContentId")
	   .load(url,function(){
		   $(".box-title").html(title);
	   })
   }

   //执行删除按钮事件
   function doDeleteObjects(){
   	console.log("删除执行了");
	   //1.获取选中的checkbox的id
	   var array=doGetCheckedIds();
	   if(array.length==0){
		   alert("请先选择")
		   return;}
	   //2.给出提示信息
	   if(!confirm("确认删除吗"))
		   return;
	   //3.放手一搏执行删除
	   //3.1 url
	   var url="student/doDeleteObjects"
	   //3.2定义参数
	   var params={"ids":array.toString()}  //
	   //3..3基于ajax发送请求
	   $.post(url,params,function(result){
		   if(result.state==1){
			   alert("detele ok")
			   doRefreshAfterDeleteOK();
		   }else{
			   alert(result.message)
		   }
	   })
	   doQueryObjects();
   }
   //删除以后的刷新操作:要么继续查询当前页数据,要么查询上一页数据(最后一页)
   function doRefreshAfterDeleteOK(){
       //1.获得当前页码值,总页数,全选状态
       var pageCurrent=$("#pageId").data("pageCurrent");
       var pageCount=$("#pageId").data("pageCount");
       var allChecked=$("#checkAll").prop("checked");
       //2.基于当前页码值以及全选状态修改当前页码值
       if(pageCurrent==pageCount&&allChecked&&pageCurrent>1){
           pageCurrent--;
           $("#pageId").data("pageCurrent",pageCurrent);
       }
       //3.重新执行查询
       doGetObjects();
   }
   function doQueryObjects(){
	   $("#pageId").data("pageCurrent",1);
	   doGetObjects();
   }
   function doGetObjects(){
	   //debugger
	   //1.params
	   //获取在Page.html中绑定的当前页码值
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   //假如没有值,设置初始值为1
	   if(!pageCurrent)pageCurrent=1;
	   //var params="pageCurrrent="+pageCurrent;
	   var params={"pageCurrent":pageCurrent};
	   //获取查询时用户输入的名字
	   var name=$("#searchNameId").val();
	   if(name)params.studentName=name;
	   //2.url
	   var url="student/doFindPageObjects";
	   //3.ajax request
	   console.log(params);
	   $.getJSON(url,params,function(result){
		   doHandleResponseResult(result);
	   });
   }
   function doHandleResponseResult(result){
	   
	   if(result.state==1){
		  doSetTableBodyRows(result.data.records);
		  doSetPagination(result.data);//page.html
	   }else{
		  doSetTableBodyErrors(result.message);
	   }
   }
   function doSetTableBodyErrors(message){
	   //获取body对象并清空
	   var tBody=$("#tbodyId");
	   tBody.empty();
	   //创建tr对象
	   var tr=$("<tr></tr>");
	   //创建td对象
	   //var len=$("table thead").find("tr").find("th").length;
	   var len=$("table th").length;
	   var td=$("<td></td>");
	   td.prop("colspan",len);
	   td.append(message);
	   tr.append(td);
	   //将tr追加到tbody
	   tBody.append(tr);
   }

   function doSetTableBodyRows(records){
	   
	  //获取tbody对象,并清空
	   var tBody=$("#tbodyId");
	   tBody.empty();
	   //2.迭代数据,并追加到tBody
	   for(var i in records){
		  //2.1构建tr对象
		  var tr=$("<tr></tr>");
		  tr.data("id",records[i].id);
		  //2.2构建tds对象
		  var tds=doCreateTds(records[i],i);
		  //2.3将tds对象追加到tr中
		  tr.append(tds);
		  //2.4将tr追加到tbody中
		  tBody.append(tr);
	   }
   }

   function doCreateTds(row,i){
	   var tds=
		"<td><input type='checkbox' class='cBox' value="+row.studentId+"></td>"+
       "<td>"+(parseInt(i)+1)+"</td>"+
	   "<td>"+row.studentName+"</td>"+
       "<td>"+getClassNameById(row.classId)+"</td>"+
			   "<td>"+row.political+"</td>"+
			   "<td>"+row.nation+"</td>"+
			   "<td>"+row.gender+"</td>"+
			   "<td>"+(new Date(row.birth).getUTCFullYear())+"年"+(new Date(row.birth).getMonth())+"月"+(new Date(row.birth).getDate())+"日"+"</td>"+
			   "<td>"+row.phone+"</td>"+
			   "<td>"+row.address+"</td>";
	   //console.log($.('.cBox').val);
	   //console.log()
	   return tds;
   }

	function getClassNameById(classId) {
		var className;
		$.ajax({
			type: "post",
			url: "/student/findClassName",
			data: {"classId":classId},
			//cache:true,    //缓存
			async: false,    //表示同步   默认的是异步的true, 因为是ajax嵌套,所以里面的
			dataType:"text",//表示返回值参数类型
			success: function (result) {  //result是controller返回的值
				//console.log(result);
				className = result;
				//console.log(className);
			}
		})
		return className;
	}

</script>
